<!doctype html>
<script src="../../resources/js-test.js"></script>
<svg viewBox="0 0 250 250">
  <foreignObject width="250" height="250">
    <svg style="height:100%; background: blue">
    </svg>
  </foreignObject>
</svg>
<script>
  description("Test use of percentages inside foreignObject");

  var nestedSvg = document.querySelectorAll('svg')[1];
  shouldBe("getComputedStyle(nestedSvg).height", "'250px'");

  nestedSvg.style.height = "50%";
  shouldBe("getComputedStyle(nestedSvg).height", "'125px'");

  var foreignObject = nestedSvg.parentNode;
  foreignObject.height.baseVal.value = 400;
  shouldBe("getComputedStyle(nestedSvg).height", "'200px'");
</script>
